<template>
    <div>
        <div class="find_top">
            <div class="back_div" @click="goBack">
                <img src="http://py9lewv6q.bkt.clouddn.com/images_1571197231返回.png" alt="" class="find_back">
                
            </div>
            <div class="input_div">
                <input type="text" class="find_input" v-model="input" v-on:input="a1">
              
           </div>
           <div class="shop_find" @click="search">
                 店内搜
           </div>
        </div>
                <div class="kuang" v-if="input!=''">
                    <ul>
                    <li v-for="(item, index) in data" :key="index" @click="find_click(item.s_baby_name)">
                        {{item.s_baby_name}}
                        </li>
                    

                    </ul>

                  
                </div>
    </div>
    




</template>
<script>
  export default {
      data() {
          return {
              input:'',
              data:''
          }
      },
    methods: {
        find_click(name){
            this.input=name
        },
        a1(){
            let that=this
             let find=this.input;
            this.$axios({
            url:'http://www.shop.com/index.php/api/user/search_pu',
            params:{
                search_name:find,
                shop_id:'1'
            }    
        })
        .then(function(res){
             let data = res.data;
             console.log(res)
             that.data=data

        })
        },
      goBack() {
         this.$router.go(-1);
      },
      search(){
        let find=this.input;
           let that=this;
        this.$axios({
         
            url:'http://www.shop.com/index.php/api/user/search_pu',
            params:{
                search_name:find,
                shop_id:'1'
            }
           
            
        })
        .then(function(res){
            console.log(res);
            let data = res.data;
            that.$router.push({
               name:'shop_find_result',
               params:{
                   data:data,
                   find:find
               }
         })
        })
      }
    }
  }
</script>
<style lang="">

.kuang{
    width: 250px;
    background: #fff;
    margin-left:75px; 
    margin-top: -28px;
    border-radius: 5px;
}
.kuang ul{
    list-style: none;
}




.find_back{
    width: 40px;
    margin-top:20px; 


}
.shop_find{
    text-align: center;
    color: aliceblue;
    width: 70px;
    height:34px;
    background-color: rgb(100, 98, 98);
    float: left;
    margin-top: 24px;
    line-height: 30px;
    border-radius: 20px;
    margin-left: 20px;
}
.back_div{
  float: left;
}
.input_div{
 float: left;
 line-height: 75px;
 margin-left: 30px;
}
   .find_input{
       width: 250px;
       height: 30px;
       border-radius: 20px;
       margin-top:-20px; 
       
      outline: none;
   }
   html{
        background-color: rgb(226, 222, 222)
   }
   .find_top{
       width: 100%;
       height: 70px;
       background-color: rgb(163, 159, 159)
   }
</style>